<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        .style-table {
            border-collapse: collapse;
            margin: 50px auto;
            font-size: 0.9em;
            min-width: 100%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .style-table thead tr {
            background-color: #0398dd;
            color: #ffffff;
            text-align: left;
        }

        .style-table th,
        .style-table td {
            padding: 12px 15px;
        }

        .style-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }

        .style-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .style-table tbody tr:last-of-type {
            border-bottom: 2px solid #0398dd;
        }

        .style-table tbody tr.active-row {
            font-weight: bold;
            color: #0398dd;
        }

    </style>
    <meta charset="UTF-8">
    <title>课堂点名系统</title>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>

<div id="app">

    <el-button v-if="username=='admin'" type="primary" @click="callName">点名</el-button>
    <el-button v-if="username!='admin'" type="success" @click="toEditStu">完善个人信息</el-button>
    <el-button v-if="username=='admin'" type="success" @click="publishJob">发布课堂练习</el-button>
    <el-button  type="success" @click="toStus">学员信息</el-button>
    <el-button  type="success" @click="projectManager">项目管理</el-button>
    <el-button  type="success" @click="toExamHtml" >作业列表</el-button>
    <el-button type="danger" @click="logout">退出登录</el-button>
    <div v-html="tableContent"></div>

    <el-dialog title="课堂练习" label-position="left" :visible.sync="examFormVisible">

        <!-- 管理员 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="username=='admin'">
            <el-tab-pane label="代码练习" name="first">
                <el-form :model="exam">
                    <el-form-item label="练习内容" label-width="120px">
                        <el-input type="textarea" v-model="exam.content" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="时间" label-width="120px">
                        <el-input v-model="exam.constTime" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="知识总结" name="second">
                <el-form :model="exam">
                    <el-form-item label="上传文档（md格式）" label-width="160px">
                        <el-upload
                                class="upload-demo"
                                drag
                                action="/uploadQuestion"
                                :on-success="handleAvatarSuccessQus"
                                :before-upload="beforeAvatarUploadQus"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传markdown文件，且不超过10M</div>
                        </el-upload>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
        </el-tabs>

        <!-- 学生 -->
        <el-form :model="exam" v-if="username!='admin'">

            <el-form-item label="练习内容" label-width="120px" v-if="exam.type == 1">
                <el-input type="textarea" v-model="exam.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="时间" label-width="120px" v-if="exam.type == 1">
                <el-input v-model="exam.constTime" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="上传答案（md格式）：" label-width="160px" v-if="exam.type == 2">
                <el-button type="primary" @click="downloadQus">下载题目</el-button>
                <el-upload
                        class="upload-demo"
                        drag
                        action="/uploadQuestion"
                        :on-success="handleAvatarSuccessQus"
                        :before-upload="beforeAvatarUploadQus"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传markdown文件，且不超过10M</div>
                </el-upload>
            </el-form-item>

        </el-form>



        <div slot="footer" class="dialog-footer">
            <el-button type="primary" v-if="username=='admin'" @click="startExam">开始练习</el-button>
            <el-button type="primary" v-if="username!='admin'" @click="finishExam">
                <em v-if="exam.type==1">已完成</em>
                <em v-if="exam.type==2">提交</em>
            </el-button>
        </div>
    </el-dialog>


    <el-dialog title="请完善个人信息" :visible.sync="stuFormVisible">
        <el-form label-position="left" :model="userInfo">


            <el-row :gutter="0">
                <el-col :span="14">
                    <el-form-item label="毕业学校：" label-width="90px">
                        <el-input v-model="userInfo.college" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="所属组：" label-width="80px">
                        <el-select v-model="userInfo.groupNumber" placeholder="请选择">
                            <el-option label="1组" value="1"></el-option>
                            <el-option label="2组" value="2"></el-option>
                            <el-option label="3组" value="3"></el-option>
                            <el-option label="4组" value="4"></el-option>
                            <el-option label="5组" value="5"></el-option>
                            <el-option label="6组" value="6"></el-option>
                            <el-option label="7组" value="7"></el-option>
                            <el-option label="8组" value="8"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>





            <el-row :gutter="0">
                <el-col :span="14">
                    <el-form-item label="专业：" label-width="100px">
                        <el-input v-model="userInfo.major" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="学历：" label-width="80px">
                        <el-select v-model="userInfo.education" placeholder="请选择">
                            <el-option label="研究生" value="研究生"></el-option>
                            <el-option label="本科" value="本科"></el-option>
                            <el-option label="专科" value="专科"></el-option>
                            <el-option label="高中" value="高中"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="14">
                    <el-form-item label="毕业时间：" label-width="100px">

                        <el-date-picker
                                value-format="yyyy"
                                format="yyyy"
                                v-model="userInfo.graduateTime"
                                type="year"
                                placeholder="选择年">
                        </el-date-picker>

                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="期望薪资：" label-width="90px">
                        <el-input  v-model="userInfo.expectSalary" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="请上传你可爱的头像：" label-width="160px">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editStu">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/jquery-2.2.3.min.js"></script>

<script src="js/axios-0.18.0.js"></script>
<script src="/js/axios-interceptor.js"></script>


<script>
    var job = {};
    var vue = new Vue({
        el: "#app",

        mounted(){
            let _this = this;
            this.username = localStorage.getItem("name");
            axios.get("/user/initTable").then(function (res) {
                _this.tableContent = res.data.data;

                axios.get("/user/all").then(function (res) {
                    let users = res.data.data;
                    let tds = $('tbody a');
                    for (let i=0;i<tds.length;i++) {
                        let name = tds[i].innerText;
                        let num = users[name];
                        var loginName = localStorage.getItem("name");
                        if(loginName != name){
                            //非登陆人
                            $(tds[i]).removeAttr("href");
                        }else {
                            //登陆人，绑定点击时间
                            $(tds[i]).click(function () {
                                let name = this.innerText;
                                axios.get("/user/call?name="+name).then(function (res) {
                                    let data = res.data.data;
                                    if(data.sign == '2'){
                                        alert(data.msg)
                                    }else if(data.sign == '1'){
                                        alert(data.msg)
                                        $(this).innerHTML=loginName+" <em style=\"font-size: 5px;color: #ff0000\">   "
                                            +data.num+"</em> ";
                                    }else if(data.sign == '3'){
                                        alert(data.msg)
                                    }else if(data.sign=='4'){
                                        alert(data.msg)
                                    }
                                });
                            });
                        }

                        $(tds[i]).html(name+" <em style=\"font-size: 5px;color: #ff0000\">   "
                            +(num>0?num:"")+"</em> ");
                    }
                });

            });

            //定时任务扫描
            if(localStorage.getItem("name")!='admin'){
                let _this = this;

                var timeJob = window.setInterval(function () {
                    axios.get("/user/isdown").then(function (res) {
                        if(res.data.data.isover){
                            window.clearTimeout(timeJob);
                            _this.examFormVisible=false;
                        }else {
                            _this.examFormVisible=true;
                            _this.exam = res.data.data.exam;
                        }
                    });
                },3000);
            }else {
                if(localStorage.getItem("examId")){
                    window.setInterval(function () {
                        axios.get("/user/count?examId="+localStorage.getItem("examId")).then(function (res) {
                            _this.$notify({
                                title: '已完成人数',
                                message: res.data.data+"/"+64+"【"+(res.data.data/64)+"】",
                                type: 'success'
                            });
                        });
                    },3000)
                }
            }

        },

        methods: {
            downloadQus(){
                window.location.href = this.exam.url;
            },
            handleClick(tab, event) {
                console.log(tab, event);
                console.log(tab.name);
                if(tab.name === 'first'){
                    this.exam.type = 1;
                }else {
                    this.exam.type = 2;
                }
            },
            beforeAvatarUpload(file){
                const isLt2M = file.size / 1024 / 1024 < 100;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 100MB!');
                }
                return isLt2M;
            },
            handleAvatarSuccess(res, file){
                if(!res.flag){
                    this.$message.error(res.data)
                }else {
                    this.imageUrl = res.data;
                }
            },

            //问题上传相关说明
            beforeAvatarUploadQus(file){
                const isLt2M = file.size / 1024 / 1024 < 100;
                if (!isLt2M) {
                    this.$message.error('文件大小不能超过 100MB!');
                }
                return isLt2M;
            },
            handleAvatarSuccessQus(res, file){
                debugger;
                if(!res.flag){
                    this.$message.error(res.data)
                }else {
                    this.fileUrl = res.data;
                    this.exam.content = file.name;
                }
            },

            toEditStu(){
                this.stuFormVisible=true;
                let _this = this;
                axios.get("/stu").then(function (res) {
                    _this.userInfo = res.data.data;
                    _this.imageUrl= res.data.data.avatorUrl;
                });
            },
            editStu(){
                let _this = this;
                // this.userInfo.graduateTime = this.userInfo.graduateTime.Format('yyyy')
                this.userInfo.avatorUrl=this.imageUrl;
                axios.put("/stu",this.userInfo).then(function (res) {
                  if(res.data.flag){
                      _this.stuFormVisible=false;
                      _this.$message.success("修改成功");
                  }
              });
            },
            finishExam(){
                let _this = this;
                axios.post('/user/finishExam',"fileUrl="+_this.fileUrl).then(function (res) {
                    if(res.data.flag){
                        _this.$message.success("做的不错！");
                        _this.examFormVisible=false;
                    }
                });
            },
            callName(){
              window.location.href="callName.html";
            },
            toStus(){
                window.location.href="stus.html";
            },
            logout(){
                window.location.href="/logout";
            },
            projectManager(){
                window.location.href="admin/page/home.html";
            },
            toExamHtml(){
                window.location.href="examList.html";
            },

            startExam(){
                let _this = this;
                axios.post('/user/publishExam',this.exam).then(function (res) {
                    if(res.data.flag){
                        _this.$message.success("发布成功");
                        _this.examFormVisible=false;
                        let examId = res.data.data;
                        localStorage.setItem("examId",examId);
                        window.setInterval(function () {
                           axios.get("/user/count?examId="+examId).then(function (res) {
                               _this.$notify({
                                   title: '已完成人数',
                                   message: res.data.data+"/"+64+"【"+(res.data.data/64)+"】",
                                   type: 'success'
                               });
                           });
                        },3000)
                    }
                });
            },
            publishJob(){
              this.examFormVisible=true;
            }

        },
        data() {
            return {
                fileUrl:'',
                activeName: 'first',
                imageUrl:"",
                userInfo:{},
                stuFormVisible:false,
                exam:{
                    type:1
                },
                username:'',
                tableContent:'',
                jobs:[
                    {"code":"1001","name":"Java基础之JVM"},
                    {"code":"1002","name":"Java基础之多线程"},
                    {"code":"1003","name":"Java基础之容器"},
                    {"code":"1004","name":"Java基础之设计模式"},
                    {"code":"1005","name":"Java基础之IO模型"},
                    {"code":"2001","name":"WEB"},
                    {"code":"3001","name":"框架之Spring&SpringBoot"},
                    {"code":"3002","name":"框架之SpringMvc"},
                    {"code":"3003","name":"框架之Mybatis&Plus"},
                    {"code":"4001","name":"Mysql数据库"},
                    {"code":"4002","name":"MQ消息队列"},
                    {"code":"4003","name":"Redis缓存"},
                    {"code":"5001","name":"分布式系统【事务&锁】"},
                    {"code":"5002","name":"微服务架构【SpringCloud】"},
                    {"code":"6001","name":"项目一"},
                    {"code":"6002","name":"项目二"},
                    {"code":"6003","name":"项目三"}
                ],
                examFormVisible:false,
                form:{
                    job:""
                }
            }
        }
    })

</script>

<script>

    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,  //月份
            "d+": this.getDate(),       //日
            "H+": this.getHours(),      //小时
            "m+": this.getMinutes(),    //分
            "s+": this.getSeconds(),    //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            S: this.getMilliseconds(),  //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(
                RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
                );
        return fmt;
    };

    $(function () {






    });

</script>

</html>
